{extend name="$index_style_layout" /}

<!--SEO相关-->
{block name="head_title"}{$fid?($info['seo_title']?:$info['name']):$m_info['title']}{/block}
{block name="head_keword"}{$fid?($info['seo_keywords']?:$info['name']):$m_info['title']}{/block}
{block name="head_description"}{$info.seo_description}{/block}

{block name="body_content"}
<link rel="stylesheet" href="/public/static/bbs/list.css">
<div class="MainContainer">
<!-- 栏目列表 -->
{include file="scroll_sort" /}
	<div class="Container">
		<div class="LeftCnt">
<!--
			<dl class="BaseInfo">
				<dt>今日<span>3</span>帖 昨日<span>5</span>帖  最高日<span>560</span>帖 </dt>
				<dd>精华区<i class="fa fa-pagelines"></i></dd>
			</dl>
-->
			<div class="ListBox">
				<div class="head">
					<span onclick="listbbs(0,'list')" class="ck">最新回复</span>
					<span onclick="listbbs(1,'id')">最新帖子</span>
					<span onclick="listbbs(2,'status')">推荐帖子</span>
					<span onclick="listbbs(3,'view')">热门帖子</span>
					<!--<span><a href="#">我的帖子</a></span>-->
				</div>
				<div class="ShowLists">
<!--name是标签名，跟通用标签不能重名，rows取几条数据,order按什么方式排序，list代表可控排序，id即时间,view代表浏览量-->
		{qb:listpage name="bbs_list_page_pc" rows="20" status="1" order="list"}
					<ul class="list">
						<li class="icon"><a href="{:get_url('user',['uid'=>$rs['uid']])}" target="_blank"><img src="{:get_user_icon($rs['uid'])}" onerror="this.src='__STATIC__/images/nobody.gif'" ></a></li>
						<li class="info">
							<div class="title"><a href="{:urls('content/show',['id'=>$rs['id']])}" target="_blank">{$rs.title}</a> {if $rs.list>time()}<span class="top">顶</span>{/if} {eq name="rs.status" value="2"}<span class="com">精</span>{/eq} {gt name="rs.view" value="200"}<span class="hot">热</span>{/gt}</div>
							<div class="more"><a href="{:get_url('user',['uid'=>$rs['uid']])}" target="_blank">{$rs.username}</a> <span><i class="fa fa-clock-o"></i>{$rs.time}  <i class="fa fa-fw fa-user-o"></i>回复: {$rs.replyuser} {$rs.update_time|format_time=true}</span></div>
						</li>
						<li class="hits"><i class="si si-eye"></i>{$rs.view}</li>
						<li class="reply"><i class="fa fa-commenting-o"></i>{$rs.replynum}</li>
					</ul>
		{/qb:listpage} 
				</div><!--{$pages} 这是传统分页-->
				<div class="ShowMoreBBs"><button type="button" onclick="ShowMoreBBs()">查看更多</button></div>
			</div>
		</div>
		<div class="RightCnt">
			<div class="RightSide">
				<dl class="RightBase">
					<dt>
						<a href="{:urls('add',['fid'=>$fid])}"><button type="button">发表新贴</button></a>
						<!--<ul><ol><span>主题</span><em>24604</em></ol><li><span>帖子</span><em>524604</em></li></ul>
						<div>共<span>345512</span>位会员 欢迎新会员<a href="#">打酱油路过</a></div>-->
					</dt>
					<dd>
						<div class="h"><span>热门分类</span></div>
						<ul>
{volist name="0|sort_config" id="rs"}
							<li><a href="{:urls('content/index',['fid'=>$rs['id']])}" {eq name="rs.id" value="$fid"}class="ck"{/eq}>{$rs.name}</a></li>
{/volist}
						</ul>
					</dd>
				</dl>
				<div class="SideMores">
					<div class="h"><span>活跃会员</span></div>
					<ul class="ListMember pc_qun_list_member">
{qb:tag name="pc_qun_list_member" js="pc_qun_list_member" type="qun" order="list" rows="6"}
						<li><a href="{$rs.url}"><span><img src="{$rs.picurl}" onerror="this.src='__STATIC__/images/nobody.gif'"  onmouseover="changeShowImg($(this),'over');" onmouseout="changeShowImg($(this),'out');" ></span><em>{$rs.title}</em></a></li>
{/qb:tag}
					</ul>
					<script type="text/javascript">
						function changeShowImg(obj,mouse){
							if(mouse=='over'){
								obj.animate({"width":"150%","height":"150%"},300);
							}else if(mouse=='out'){
								obj.animate({"width":"100%","height":"100%"},300);
							}
						}
					</script>
					<div class="MOreShow"><button class="showMoreShop" type="button" onclick="showMoreMember('{qb:url name='pc_qun_list_member' /}')">更多<i class="fa fa-chevron-down"></i></button></div>
				</div>
<script type="text/javascript">
var shoppage=1;
function showMoreMember(url){	
	shoppage++;
	$.get(url+shoppage+'&'+Math.random(),function(res){
		if(res.code==0){
			if(res.data==''){
				layer.msg("已经显示完了！",{time:500});
				$('.showMoreShop').attr('onclick','');
				$('.showMoreShop').html('显示完了');
				$('.showMoreShop').css({'background':'#CCC'});
			}else{
				//$('.ListShops').append(res.data);
				res.data="<div class='pages"+shoppage+"'>"+res.data+"</div>";			
				$('.ListMember').append(res.data);
				$('.ListMember .pages'+shoppage).hide();
				$('.ListMember .pages'+shoppage).show(500);
			}			
		}else{
			layer.msg(res.msg,{time:2500});
		}
	});
}
</script>
				<div class="SideMores">
					<div class="h"><span>精彩内容</span></div>
					<ul class="ListNewfen">
{qb:tag name="pc_indexpage" type="bbs" order="status" rows="8"}
						<li><a href="{$rs.url}">{$rs.title}</a></li>
{/qb:tag}
					</ul>
					<div class="MOreShow msnewfen"><button type="button" onclick="MoreShowNewfen('{qb:url name='pc_indexpage' /}')">更多<i class="fa fa-chevron-down"></i></button></div>
				</div>
<script type="text/javascript">
var M_s_page = 1;
function MoreShowNewfen(url){
	M_s_page++;
	$.get(url+M_s_page+'&'+Math.random(),function(res){
		if(res.code==0){
			if(res.data==''){
				layer.msg("已经显示完了！",{time:500});
				$('.msnewfen').hide();
			}else{
				$('.ListNewfen').append(res.data);
			}
		}else{
			layer.msg(res.msg,{time:2500});
		}
	});
}
</script>
				<div class="SideMores">
					<div class="h"><span>友情链接</span></div>
					<ul class="FriendLink">
						{qb:tag name="pc_bbsindex_link001" type="links"}
						<!--<li><a href="https://www.qibo168.com" target="_blank">齐博开发网</a></li>
						<li><a href="http://www.qibomb.com" target="_blank">齐博模板网</a></li>
						<li><a href="http://www.qibomoban.com" target="_blank">齐博模板堂</a></li>
						<li><a href="http://www.admin5.net/" target="_blank">A5站长网</a></li>
						<li><a href="http://www.im286.com/" target="_blank">落伍者</a></li>						
						<li><a href="http://www.chinaccnet.com/" target="_blank">中电云集</a></li>-->
						<li><a href="{$rs.url}" target="_blank" style="{if $rs.font_color}color:{$rs.font_color};{/if} {if $rs.bgcolor}background:{$rs.bgcolor}{/if}" title="{$rs.about}">{if $rs.icon}<i class="{$rs.icon}"></i>{/if} {$rs.title}</a></li>
						{/qb:tag}
					</ul>
				</div>
				<dl class="WXcode">
					<dt>扫一扫访问手机版</dt>
					<dd><img src="{:get_qrcode(get_url('location'))}"/>
					</dd>
				</dl>
			</div>
		</div>
	</div>
</div>
<div class="topUpCont">
    <ul>
    	<ol><i class="fa fa-angle-double-up"></i></ol>
        <li>回到顶部</li>
    </ul>
</div>
<script>
var Mpage=1;
var byorder='list';
var showmorebbs='<button type="button" onclick="ShowMoreBBs()">查看更多</button>';
function ShowMoreBBs(){
	Mpage++;
	$('.ShowMoreBBs').html('内容加载中……');
	$.get('{qb:list_url name="bbs_list_page_pc" /}'+Mpage+'&order='+byorder+'&'+Math.random(),function(res){
		if(res.code==0){
			if(res.data==''){
				layer.msg("已经显示完了！",{time:500});
				$('.ShowMoreBBs').html('');
			}else{
				$('.ShowLists').append("<span class='Mpage"+Mpage+"'></span>");
				$('.Mpage'+Mpage).hide();
				$('.Mpage'+Mpage).html(res.data);
				$('.Mpage'+Mpage).fadeIn();
				$('.ShowMoreBBs').html(showmorebbs);
				scroll_get = true;
			}
		}else{
			layer.msg(res.msg,{time:2500});
		}
	});
}

//滚动显示更多
var scroll_get = true;	//做个标志,不要反反复复的加载
$(document).ready(function () {
	$(window).scroll(function () {
		if (scroll_get==true &&  (400 + $(window).scrollTop())>($(document).height() - $(window).height())) {
			scroll_get = false;
			layer.msg('内容加截中,请稍候',{time:1000});
			ShowMoreBBs();
		}
	});
});

function listbbs(num,order){
	Mpage=1;
	byorder=order;
	$('.ListBox .head span').removeClass('ck');
	$('.ListBox .head span').eq(num).addClass('ck');
	$.get('{qb:list_url name="bbs_list_page_pc" /}'+Mpage+'&order='+byorder+'&'+Math.random(),function(res){
		if(res.code==0){
			if(res.data==''){
				layer.msg("没有相应的帖子！",{time:500});
				$('.ShowLists').html('');
				$('.ShowMoreBBs').html('');
			}else{
				$('.ShowLists').html("<span class='Mpage"+Mpage+"'></span>");
				$('.Mpage'+Mpage).hide();
				$('.Mpage'+Mpage).html(res.data);
				$('.Mpage'+Mpage).fadeIn();
				$('.ShowMoreBBs').html(showmorebbs);
			}
		}else{
			layer.msg(res.msg,{time:2500});
		}
	});
}

$(document).ready(function () {	
	var rightBoxH = $('.RightSide').height();	//右边页面的高度	
	var headBoxH = $('.RightBase').offset().top;	//元素距离网页顶部的距离
	$(window).scroll(function () {
		var scroll_Height = $(window).scrollTop(); //页面滚动的高度距离
		if(scroll_Height>rightBoxH+headBoxH){
			$('.RightBase').addClass('RightBase1'); //让右边漂浮起来
			var thistopH = scroll_Height-headBoxH;	//靠在页面的顶部
			$(".RightBase").css({'top':thistopH+'px'});
		}else{
			$('.RightBase').removeClass('RightBase1');
		}
		if (scroll_Height > 100) {
			$(".topUpCont").show();
		} else {
			$(".topUpCont").hide();
		}		
	});
	$(".topUpCont").click(function () {
		$("html,body").animate({scrollTop:0},500);
	});
});

</script>
{/block}